<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-euiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
   <link rel="stylesheet" type="text/css" href="./steps.css">

</head>
<body>
  
</body>
</html>
<h2>定宽步骤条</h2>
<div class="ui-steps">
  <div class="wrap">
    <div class="finished">
      <label><span class="round">1<i class="ui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2 </span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label>
    </div>
  </div>
</div>
<div class="ui-steps steps-large">
  <div class="wrap">
    <div class="finished">
      <label><span class="round">1<i class="ui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label>
    </div>
  </div>
</div>
<h2>自适应步骤条</h2><span>根据页面大小自适应的steps,需要浏览器支持display:table,display:table-cell属性</span>
<div class="ui-steps steps-auto">
  <div class="wrap">
    <div class="finished">
      <label><span class="round">1<i class="ui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label>
    </div>
  </div>
</div>
<div class="ui-steps steps-large steps-auto">
  <div class="wrap">
    <div class="finished">
      <label><span class="round">1<i class="ui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="current">
      <label><span class="round">2</span><span>第二步 #333333</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第三步 #999999</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
  <div class="wrap">
    <div class="todo">
      <label><span class="round">3</span><span>第四步 #999999</span></label><i class="triangle-right-bg"></i><i class="triangle-right"></i>
    </div>
  </div>
</div>
<h2>前台定宽步骤条 </h2>
<div class="ui-steps-round">
  <div class="finished">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="current">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo last">
    <div class="wrap">
      <div class="round">3</div>
    </div>
    <label>文字描述</label>
  </div>
</div>
<h2>前台自适应步骤条 </h2><span>根据页面大小自适应的steps,如果仅指定steps-round-auto,步骤条会自动适应，如果希望步骤条整体自适应，同时单个step保持一定比例的宽度，参考下面的例子</span>
<div class="ui-steps-round steps-round-auto">
  <div class="finished">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文文字描述文字描述文字描述文字描述字描述文字</label>
  </div>
  <div class="current">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo last">
    <div class="wrap">
      <div class="round">3</div>
    </div>
    <label>文字描述</label>
  </div>
</div><span>同时指定了steps-round-auto和steps步骤数,步骤条会整体自适应，同时单个step保持一定比例的宽度，目前提供steps-3到steps-7，使用方法类似bootstrap的删隔布局</span>
<div class="ui-steps-round steps-round-auto steps-4">
  <div class="finished">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文文字描述文字描述文字描述文字描述字描述文字</label>
  </div>
  <div class="current">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo">
    <div class="wrap">
      <div class="round">1</div>
      <div class="bar"></div>
    </div>
    <label>文字描述</label>
  </div>
  <div class="todo last">
    <div class="wrap">
      <div class="round">3</div>
    </div>
    <label>文字描述</label>
  </div>
</div>